<template>
  <div class="wrap-only">
    <mt-loadmore
      ref="loadmore2"
      :autoFull="false"
      class="loadmore-div">
      <swiper
      class="swiperWrap"
      :options="swiperOption"
      ref="mySwiper">
        <swiper-slide class="swiperWrap" v-for="(item, index) in swiperList" :key="index">
          <!--<router-link :to="item.jumpAddress" class="swiper-a">-->
            <img :src="'http://47.92.123.35:9090/' + item.bannerUrl" style="width: 100%;vertical-align: middle;"/>
          <!--</router-link>-->
        </swiper-slide>
        <div class="swiper-pagination oldPagination"  slot="pagination"></div>
      </swiper>
      <swiper
        class="swiperWrap"
        :options="listOption"
        ref="mySwiper2">
        <swiper-slide
          v-for="(item, index) in listList"
          :key="index"
          class="list">
          <a
            @click="toList(item2)"
            v-for="(item2, index2) in item"
            :key="index2"
            style="margin: 0 .75rem;">
            <div
              style="margin-bottom: .3rem;padding: .2rem;height: 1.3rem;">
              <!--<i :class="['iconfont', item2.icon, 'iconfontsize']"></i>-->
              <img :src="'http://47.92.123.35:9090/' + item2.categoryImg" style="height: 100%;"/>
            </div>
            <div>{{item2.categoryName}}</div>
          </a>
        </swiper-slide>
        <div
          class="swiper-pagination pagination"
          slot="pagination"></div>
      </swiper>
      <div style="overflow: scroll;white-space: nowrap;height: 3rem;">
        <img style="height: 100%;" src="../../../static/shiyongjiaju.png" alt="" />
        <img style="height: 100%;" src="../../../static/jingxuanrizu.png" alt="" />
        <img style="height: 100%;" src="../../../static/chaoliupinpai.png" alt="" />
        <img style="height: 100%;" src="../../../static/ershoushouji.png" alt="" />
      </div>
      <!--热门专区-->
      <!--<div 
        v-for="(item, index1) in oPartition"
        :key="index1">
        <div class="title">
          <h1 class="fl title-h1">热门租赁专区</h1>
          <a @click="toHot" class="fr title-more">查看更多</a>
          <br style="clear: both;"/>
          <p class="title-p">别说你一部都没用过</p>
        </div>
        <div class="hot-div">
          <a @click="toHot">
            <img :src="'http://47.92.123.35:9090/' + 'ishot.png'"/>
          </a>
        </div>
        <div class="goods">
          <div>
            <div
              class="card"
              :class="index % 2 ? 'fr' : 'fl'"
              v-for="(item, index) in goodsList"
              :key="index"
              @click="goGoods(index)">
              <a>
                <div class="cardImg-div">
                  <img :src="'http://47.92.123.35:9090/' + item.top_img"/>
                </div>
                <div class="cardDesc-div">
                  <p class="price">{{item.goods_price | money}}/天起</p>
                  <p class="desc">{{item.goods_title}}</p>
                </div>
              </a>
            </div>
            <br style="clear: both;"/>
          </div>
        </div>
      </div>-->
      <div
        v-for="(item, index1) in oPartition"
        :key="index1">
        <div class="title">
          <h1 class="fl title-h1">{{item.partitionName}}</h1>
          <a @click="toHot(index1)" class="fr title-more">查看更多</a>
          <br style="clear: both;"/>
          <p class="title-p">别说你一部都没用过</p>
        </div>
        <div class="hot-div">
          <a @click="toHot(index1)">
            <!--<img :src="'http://47.92.123.35:9090/' + 'ishot.png'"/>-->
            <img :src="'http://47.92.123.35:9090/' + item.partitionImg"/>
          </a>
        </div>
        <div class="goods">
          <div>
            <div
              class="card"
              :class="index % 2 ? 'fr' : 'fl'"
              v-for="(item, index) in goodsList[index1]"
              :key="index"
              @click="goGoods(index1, index)">
              <a>
                <div class="cardImg-div">
                  <img :src="'http://47.92.123.35:9090/' + item.top_img"/>
                </div>
                <div class="cardDesc-div">
                  <p class="desc">{{item.goods_title}}</p>
                  <p class="price">{{item.goods_price | money}}/天起</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!--bottom-->
    </mt-loadmore>
  </div>
</template>

<script>
import {getPart, queryPartition, getGoodsCategory, getIndexBanner} from '../../api/home.js'
//import {queryAuthenticationInfo} from '../../api/person.js'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        notNextTick: true,
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      },
      listOption: {
        notNextTick: true,
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true
      },
      swiperList: [
        {
          index: '/index/order',
          img: 'http://47.92.123.35:9090/' + 'banner1.jpg'
        },
        {
          index: '/index/order',
          img: 'http://47.92.123.35:9090/' + 'banner2.jpg'
        },
        {
          index: '/index/order',
          img: 'http://47.92.123.35:9090/' + 'banner3.jpg'
        },
        {
          index: '/index/order',
          img: 'http://47.92.123.35:9090/' + 'banner4.jpg'
        }
      ],
      listList: [
      ],
      goodsList: [],
      isHot: false,
      topStatus: '',
      oPartition: {},
      partition: 'is_hot',
      partitionSort: -1
    }
  },
  filters: {
    money: function (value) {
      return '￥' + value
    }
  },
  methods: {
    toList (obj) {
      this.list = obj.categoryName
      this.isHot = false
      this.$store.state.list = this.list
      this.$store.state.isHot = this.isHot
      this.$router.push('/list')
    },
    toHot (index) {
      this.list = this.oPartition[index].partitionName
      this.isHot = true
      this.$store.state.partition = this.oPartition[index].partitionField
      this.$store.state.list = this.list
      this.$store.state.partitionImg = this.oPartition[index].partitionImg
      this.$store.state.isHot = this.isHot
      this.$router.push('/list')
    },
    goGoods (index1, index) {
      this.$store.state.goodsNum = this.goodsList[index1][index].goods_num
      this.$router.push({
        path: '/goods',
        query: {
          path: '/'
        }
      })
    },
    async getPart (index) {
      try {
        let data = await getPart({partition: this.partition})
        this.goodsList[index] = data.data
        this.$forceUpdate()
      } catch (err) {
        console.log(err)
      }
    },
    async queryPartition () {
      try {
        let data = await queryPartition({})
        this.oPartition = data.data
        console.log(this.oPartition)
        for (let i = 0; i < this.oPartition.length; i++) {
          this.partition = this.oPartition[i].partitionField
          this.partitionSort = this.oPartition[i].partitionSort - 1
          this.getPart(this.partitionSort)
        }
      } catch (err) {
        console.log(err)
      }
    },
    async getGoodsCategory () {
      try {
        let data = await getGoodsCategory({})
        this.listList.push(data.data.result1)
        this.listList.push(data.data.result2)
      } catch (err) {
        console.log(err)
      }
    },
    async getIndexBanner () {
      try {
        let data = await getIndexBanner({})
        this.swiperList = data.data
        this.$forceUpdate()
      } catch (err) {
        console.log(err)
      }
    }
  },
  created: function () {
    this.getIndexBanner()
    this.getGoodsCategory()
    if (localStorage.isLogin === undefined) {
      localStorage.isLogin = 'false'
    }
    if (JSON.parse(localStorage.isLogin) === false) {
      this.$store.state.isLogin = false
    } else {
      this.$store.state.isLogin = true
    }
    this.queryPartition()
//  this.getPart()
  },
  computed: {
    mySwiper () {
      return this.$refs.mySwiper.swiper
    },
    mySwiper2 () {
      return this.$refs.mySwiper2.swiper
    }
  },
  mounted () {
    let that = this
    var first = null
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      if (
        that.$route.name === 'zulin' ||
        that.$route.name === 'order' ||
        that.$route.name === 'person'
      ) {
        if (!first) {
          first = new Date().getTime()
          mui.toast('再按一次退出应用')
          setTimeout(function () {
            first = null
          }, 1000)
          error
        } else {
          if (new Date().getTime() - first < 1000) {
            plus.runtime.quit()
            error
          }
        }
      }
      error
    }
  }
}
</script>

<style>
  .wrap-only{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background: #f7f8f8;
  }
  .loadmore-div{
    margin: 2.1rem 0 2rem;
    position: fixed;
    background: #f7f8f8;
    top: 0;
    left: 0;
    bottom: 0; /*距离底部的距离为底部盒子的高度，自己也可以设置*/
    overflow-y: scroll;
    width: 100%;
    height: auto;
    -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
  }
  .swiperWrap{
    /*margin: 0 3%;*/
  }
  .swiper-a{
    display: block;
  }
  .list{
    display: flex;
    width: 100%;
    height: 4rem;
    padding: .6rem 0;
    box-sizing: border-box;
  }
  .list a{
    font-size: 0.6rem;
    flex: 1;
    height: 100%;
    text-align: center;
  }
  .oldPagination{
    text-align: right;
  }
  .swiper-pagination-bullet{
    background: red;
  }
  .pagination{
    bottom: 0 !important;
    text-align: center;
  }
  .pagination span{
    width: .8rem;
    height: .1rem;
    background: #007aff;
    border-radius: 0;
  }
  .iconfontsize{
    font-size: 1.5rem;
  }
  /*热门专区*/
 .title{
   box-sizing: border-box;
   padding: .5rem 3% 0;
 }
 .title-h1{
   font-size: .8rem;
   line-height: 1.6rem;
   color: #303133;
 }
 .title-more{
   font-size: .7rem;
   line-height: 1.6rem;
   color: #909399;
 }
 .title-p{
   color: #C0C4CC;
   font-size: .6rem;
 }
 /*.imgWrap{
   padding: 0 3%;
 }*/
 /*goods*/
.goods{
  /*padding: 0 3%;*/
  background: #f7f8f8;
}
.goods-h3{
  font-size: .9rem;
  padding: .5rem 0;
}
/*详情*/
.card{
  text-align: center;
  background: #fff;
  width: 44%;
  margin-bottom: .5rem;
  border-radius: 0.75rem;
  /*box-shadow: 0 0 0.3rem #b5b5b6;*/
}
/*.card1{
  text-align: center;
  background: #fff;
  height: 5rem;
  margin-bottom: .5rem;
  border-radius: 0.75rem;
  margin: 0 .5rem .5rem;
  padding-right: .5rem;
  box-shadow: 0 0 0.3rem #b5b5b6;
}
.card1 a{
  display: flex;
  height: 100%;
  justify-content: space-between;
}
.card1Img-div{
  width: 5rem;
  height: 100%;
  text-align: center;
}
.card1Img-div img {
  height: 100%;
}
.card1Desc-div{
  width: 5rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-left: 1rem;
}*/

.card.fl{
  margin-left: 4%;
}
.card.fr{
  margin-right: 4%;
}
.cardImg-div{
  box-sizing: border-box;
  padding: 0 .8rem;
  height: 4rem;
}
.cardImg-div img{
  height: 100%;
  vertical-align: middle;
}
.cardDesc-div{
  padding: .3rem .5rem .5rem;
  font-size: .7rem;
}
.cardDesc-div p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.desc{
  font-size: .55rem;
  margin-bottom: .3rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #909399;
  width: 100%;
}
.price{
  font-size: .55rem;
  color: #e94c75;
}
.bottom-div{
  text-align: center;
}
.hot-div img{
  width: 100%;
  margin-bottom: .5rem;
}
.jb{
  display: flex;
  margin-bottom: .5rem;
}
.jb span{
  font-size: .5rem;
  border: 1px solid #e94c75;
  color: #e94c75;
  padding: .1rem;
  border-radius: .2rem;
  margin-right: .3rem;
}
</style>
